import React, { useEffect, useState, useRef } from 'react';
import { styled, createMuiTheme } from '@material-ui/core/styles';
import {
  useMediaQuery,
  BottomNavigation,
  BottomNavigationAction,
  Slide,
  AppBar,
  Toolbar,
  Typography,
  IconButton,
} from '@material-ui/core';
import HomeIcon from '@material-ui/icons/Home';
import PersonIcon from '@material-ui/icons/Person';
import FavoriteIcon from '@material-ui/icons/Favorite';
import CameraIcon from '@material-ui/icons/Camera';
import ArrowBackIcon from '@material-ui/icons/ArrowBack';
import { history, useLocation } from 'umi';
import { CSSTransition, TransitionGroup } from 'react-transition-group';
import { PageProvider, usePageConfig } from '../hooks/page';
import Footer from '@/component/Footer';

const LeftNavigation = styled(BottomNavigation)({
  flexDirection: 'column',
  justifyItems: 'center',
  height: '100%',
});

const Root = styled('div')({
  width: '100%',
  height: '100%',
  boxSizing: 'border-box',

  '& .bottomNavigation': {
    position: 'fixed',
    width: '100%',
    bottom: 0,
  },
  '& .leftNavigation': {
    position: 'fixed',
    height: '100%',
    top: 0,
    left: 0,
  },
  '& .header': {},
  '& .title': {
    flexGrow: 1,
    color: 'white',
  },
  '& .container > div': {
    minHeight: '100%',
  },
});

const navigationModels = [
  {
    name: '首页',
    icon: <HomeIcon />,
    value: '/',
  },
  {
    name: '动态',
    icon: <CameraIcon />,
    value: '/dynamic',
  },
  {
    name: '收藏',
    icon: <FavoriteIcon />,
    value: '/fav',
  },
  {
    name: '我的',
    icon: <PersonIcon />,
    value: '/me',
  },
];

const BasicLayout: React.FC = ({ children }) => {
  const { pathname } = useLocation();
  const matches = useMediaQuery('(min-width:800px)');

  const pageConfig = usePageConfig();

  const showAppBar = pageConfig.appBarStyle !== 'none';
  const showNavigation =
    navigationModels.findIndex(item => item.value === pathname) !== -1;
  const leftNavigation = showNavigation && matches;
  const bottomNavigation = showNavigation && !matches;

  const leftNavigationWidth = leftNavigation ? 80 : 0;
  const bottomNavigationHeight = bottomNavigation ? 56 : 0;
  const appBarHeight = showAppBar ? 56 : 0;

  function handleChange(event: React.ChangeEvent<{}>, newValue: any) {
    history.replace(newValue);
  }

  function handleGoBack() {
    history.goBack();
  }

  function handleGoHome() {
    history.replace('/');
  }

  return (
    <Root>
      <Slide direction="down" in={showAppBar} mountOnEnter unmountOnExit>
        <AppBar position="fixed" className="header">
          <Toolbar>
            {history.length > 1 ? (
              <IconButton
                edge="start"
                color="inherit"
                aria-label="back"
                onClick={handleGoBack}
              >
                <ArrowBackIcon />
              </IconButton>
            ) : (
              <IconButton
                edge="start"
                color="inherit"
                aria-label="home"
                onClick={handleGoHome}
              >
                <HomeIcon />
              </IconButton>
            )}

            <Typography variant="h6" className="title" noWrap>
              {showAppBar ? pageConfig.appBarTitleText : ''}
            </Typography>
            {/* <Button color="inherit">Login</Button> */}
          </Toolbar>
        </AppBar>
      </Slide>
      <div
        className="container"
        style={{
          paddingTop: appBarHeight,
          paddingLeft: leftNavigationWidth,
          paddingBottom: bottomNavigationHeight,
        }}
      >
        <TransitionGroup>
          <CSSTransition key={pathname} classNames="fade" timeout={300}>
            {children}
          </CSSTransition>
        </TransitionGroup>
      </div>
      <Slide direction="right" in={leftNavigation} mountOnEnter unmountOnExit>
        <LeftNavigation
          className="leftNavigation"
          value={pathname}
          onChange={handleChange}
        >
          {navigationModels.map(item => (
            <BottomNavigationAction
              style={{ maxHeight: '64px' }}
              key={item.name}
              label={item.name}
              value={item.value}
              icon={item.icon}
            />
          ))}
        </LeftNavigation>
      </Slide>
      <Slide direction="up" in={bottomNavigation} mountOnEnter unmountOnExit>
        <BottomNavigation
          className="bottomNavigation"
          value={pathname}
          onChange={handleChange}
        >
          {navigationModels.map(item => (
            <BottomNavigationAction
              key={item.name}
              label={item.name}
              value={item.value}
              icon={item.icon}
            />
          ))}
        </BottomNavigation>
      </Slide>
    </Root>
  );
};

export default BasicLayout;
